{% extends "layout/content.twig" %}

{% block main %}
    <style>
        tr:hover {
            background: none !important;
        }

        .copy {
            cursor: pointer;
        }
    </style>
    <div class="layui-card">
        <div class="layui-card-header">图标库</div>
        <div class="layui-card-body">


            <div class="layui-tab layui-tab-brief" lay-filter="action">
                <ul class="layui-tab-title">
                    <li class="layui-this">iconfont</li>
                    <li>layui-icon</li>
                </ul>
                <div class="layui-tab-content">

                    <div class="layui-tab-item layui-show">

                        <pre>
// 可以使用字体大小控制图标大小
// 文档支持：https://layui.dev/docs/2/class/#font-size
// 如：layui-font-20
<i class="iconfont icon-translate layui-font-20"></i>
<i class="iconfont icon-money layui-font-20"></i>
                        </pre>

                        <table class="layui-table">
                            <tbody>
                            {% for fonts in icons.icon %}
                                <tr>
                                    {% for font in fonts %}
                                        <td>
                                            <div class="copy" data-clipboard-text="iconfont {{ font }}">
                                                <div class="text-center mt10">
                                                    <i class="iconfont {{ font }} layui-font-20"></i>
                                                </div>
                                                <div class="text-center mtb10">
                                                    {{ font }}
                                                </div>
                                            </div>
                                        </td>
                                    {% endfor %}
                                </tr>
                            {% endfor %}
                            </tbody>
                        </table>

                    </div>

                    <div class="layui-tab-item">
                        <pre>
// 文档支持：https://layui.dev/docs/2/icon/#examples
// 图标大小，如：layui-font-20
<i class="layui-icon layui-icon-github"></i>
<i class="layui-icon layui-icon-github layui-font-20"></i>
                        </pre>

                        <table class="layui-table">
                            <tbody>
                            {% for fonts in icons['layui-icon'] %}
                                <tr>
                                    {% for font in fonts %}
                                        <td>
                                            <div class="copy" data-clipboard-text="layui-icon {{ font }}">
                                                <div class="text-center mt10">
                                                    <i class="layui-icon {{ font }} layui-font-20"></i>
                                                </div>
                                                <div class="text-center mtb10">
                                                    {{ font }}
                                                </div>
                                            </div>
                                        </td>
                                    {% endfor %}
                                </tr>
                            {% endfor %}
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}

{% block script %}
    <script type="text/javascript">
      layui.use(['element', 'code', 'clipboard'], function () {

        let clipboard = layui.clipboard

        layui.code({
          elem: 'pre',
          header: false,
          preview: true,
          layout: ['code'],
          tools: ['full', 'window'],
          langMarker: true,
          lang: 'html',
          ln: false
        })

        let clip = new clipboard('.copy')
        clip.on('success', function (e) {
          layer.msg('{{ __('dialog.cp_success') }}', { icon: 1, anim: 'slideDown', offset: ['90px'] })
        })
        clip.on('error', function (e) {
          layer.msg('{{ __('dialog.cp_fail') }}', { icon: 2 })
        })
      })
    </script>
{% endblock %}